<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>初始vue</title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			初识Vue:
			1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
			2.root容器里的代码依然符合htm1规范，只不过混入了一些特殊的Vue语法;
			3.root容器里的代码被称为[Vue模板] :
			4.Vue实例和容器是一一对应的:
			5.真实开发中只有一个Vue实例，并且会配合着组件一起使用;
			6.{{xxx}}中的xxx要写is表达式，且xxx可以自动读取到data中的所有属性
			7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新:
		 -->


		<!-- 
		 注意区分: js表达式 和 js代码(语句)
		 1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方:
		 (1).a
		 (2).a+b
		 (3).demo
		 (4).x === y ?a': b
		 
		 2.js代码(语句)
		 (1).if(){}
		 (2).for(){}
		 -->

		<!-- id选择器  使用# -->
		<!-- class选择器 使用. -->
		<div id="root">
			<h1>{{name}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //关闭vue 在启动时生成生产提示
		//创建一个vue实例，传一个对象（这一般叫配置对象），
		//配置对象里面的key和类型不能更改。
		//多个key之间用,
		new Vue({
			//e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
			el: '#root', //el element;这句话是找到css id
			//这是自己找到元素赋值给el，两者写法效果一样，上面较常用。
			//el:document.getElementById('root')
			data: { //data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象。
				name: "尚硅谷12",
				address: '北京'
			}
		})
	</script>
</html>